<template>
  <div>
    <el-tabs v-model="activeName" v-loading="loading">
      <el-tab-pane label="添加一级类别" name="first">
        <span>商品类名</span>&nbsp;
        <el-input v-model="yiji.class_first" placeholder="请输入商品类名"></el-input>
        <el-button style="background: blueviolet;color:white" @click="add1">添加</el-button>
      </el-tab-pane>
      <el-tab-pane label="添加二级类别" name="second">
        <span>选择一级类名</span>&nbsp;
        <el-select v-model="erji.class_first" placeholder="请选择一级商品类名">
          <el-option value=""></el-option>
          <el-option label="粮油" value="粮油"></el-option>  
          <el-option label="食品" value="食品"></el-option> 
          <el-option label="蔬菜" value="蔬菜"></el-option>
          <el-option label="电器" value="电器"></el-option>
        </el-select
        ><br /><br />
        <span>二级商品类名</span>&nbsp;
        <el-input
          v-model="erji.class_second"
          placeholder="请输入二级商品类名"
        ></el-input
        ><br /><br />
        <el-button
          style="margin-left: 90px; width: 210px;background: blueviolet;color:white;"
          @click="add2"
          >添加</el-button
        >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  name: "Tianjiazhonglei",
  data() {
    return {
      loading:false,
      activeName: "first",
      yiji: {
        class_first: "",
        class_second: "",
      },
      erji: {
        class_first: "",
        class_second: "",
      },
    };
  },
  methods: {
    getPro(){
      this.$axios({
          url: "/findpro",
          method: "get",
        }).then((res) => {
          console.log(res);
          this.data = res.data.data;
          this.total = res.data.data.length;
          this.loading=false;
        });     
    },
    add1() {
      this.loading=true;
      this.$axios({
        url: "/addkind",
        method: "post",
        data: this.yiji,
      }).then((res) => {
        console.log(res);
        this.getPro();
        if (res.data.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
        }
      });
    },
    add2() {
      this.loading=true;
      this.$axios({
        url: "/addkind",
        method: "post",
        data: this.erji,
      }).then((res) => {
        console.log(res);
        this.getPro();
        if (res.data.code == 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
        }
      });
    },
  },
};
</script>
<style scoped>
.el-input {
  width: 210px;
  margin-right: 20px;
}

</style>